<!--
 @description 添加品类
 @fileName AddCategory.vue
 @author zengqiongying
 @created 2022/11/08 19:23:12
-->
<template>
  <div class="page-has-bottom bg_gray">
    <ComHeader title="添加品类" bg-color="#FAFBFE" />
    <div class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" :disabled="!enbleSubmit" @click="handlerConfirm">确定</van-button>
    </div>
    <div class="category-title">品类选择</div>
    <div class="category-select">
      <LabelSelect
        v-model="categorySelectionList"
        :url="`/data-dict/app/v2/dictionary/CRM_CATEGORY_SELECTION`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="{ query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
        :excludes="categoryExcludes"
        :includes="disConfCategorySelection"
        multiple
      />
    </div>
  </div>
</template>

<script>
import LabelSelect from '@/components/LabelSelect'
import { bus } from '@/utils/bus'
import { json2FormData } from '@/utils'
import { getOptyDetail, getOptyCategoryData, addOptyCategory } from '@/apis/optyCategory'
import { distributorConfigCategoryByDisCode } from '@/apis/customer'
export default {
  name: 'CustomerOptyAddCategory',
  components: { LabelSelect },
  data() {
    return {
      optyId: this.$route.query.id, // 商机ID
      clueCustomerId: '', // 线索客户ID
      categoryExcludes: [], // 需排除的品类(数据库已保存的品类)
      categorySelectionList: [], // 当前已选择品类编码
      disConfCategorySelection: [] // 经销商类目
    }
  },

  computed: {
    enbleSubmit() {
      return this.categorySelectionList.length > 0
    }
  },

  async created() {
    this.disConfCategorySelection = await distributorConfigCategoryByDisCode()
    this.getDetail()
    this.queryOptyCategory(this.optyId)
  },
  activated() {},

  mounted() {},

  methods: {
    getDetail() {
      getOptyDetail(this.optyId).then(res => {
        this.detail = res.data || ''
      })
    },
    async queryOptyCategory(id) {
      const otherFilters = [{ id: 'optyId', property: 'optyId', value: id, operator: '=' }]
      const sortersRaw = [{ 'id': 'isStop', 'property': 'isStop', 'direction': 'asc' }, { 'id': 'createTime', 'property': 'createTime', 'direction': 'asc' }]

      const data = json2FormData({
        pageFlag: false,
        filtersRaw: JSON.stringify(otherFilters),
        sortersRaw: JSON.stringify(sortersRaw)
      })

      const records = await getOptyCategoryData(data) || []
      this.categoryExcludes = records.filter(v => v.isStop === 0).map(v => v.type) // 用于添加方案过滤数据
    },
    handlerConfirm() {
      const categorySelection = this.categorySelectionList.join(',')
      const { clueCustomerId, id } = this.detail
      const data = { categorySelection, clueCustomerId, optyId: id, schemeId: null }
      return addOptyCategory(data).then(res => {
        this.$toast('操作成功')
        bus.$emit('refreshOptyItem', {
          title: '添加品类',
          type: 'addcategory',
          id: this.optyId
        })
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .category-title{
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #888A9C;
  }
  .category-select{
    padding: 16px 8px 0;
    background: #fff;
  }
</style>
